<script setup lang="ts">
import DigitalModel from './DigitalModel.vue';

defineProps<{
  width: string,
  height: string,
  time: number
}>()
</script>

<template>
  <div class="clock" :style="{ width, height, lineHeight: height }">
    <div class="one num">
      <DigitalModel :time="time < 10 ? 0 : Math.floor(time / 10)" />
    </div>

    <div class="two num">
      <DigitalModel :time="time < 10 ? time : Math.floor(time % 10)" />
    </div>

  </div>
</template>

<style lang='scss' scoped>
.clock {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 110%;
  height: 100%;
  padding: 10%;

  background-color: #ff0;

  .num {
    width: 45%;
  }

}
</style>